import { StyleSheet } from 'react-native';

import { px } from '../../util/adapt';
import {
  APP_BLUE,
  APP_BLACK,
  APP_BORDER_GRAY,
  APP_SECOND_LIGHT_BLUE
} from '../../constant/color';

export const MAX_CONTENT_HEIGHT = px(414);

export default StyleSheet.create({
  container: {
    width: px(300),
    paddingTop: px(16),
    paddingBottom: px(28),
    paddingHorizontal: px(10),
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ffffff',
    borderRadius: px(8),
    zIndex: 10
  },
  shadowContainer: {
    shadowColor: 'rgba(0, 51, 107, 0.3)',
    shadowOffset: { width: 0, height: -1 },
    shadowOpacity: 1,
    shadowRadius: 6
  },
  title: {
    fontSize: px(16),
    color: APP_BLACK,
    fontWeight: '500'
  },
  scrollView: {
    marginTop: px(30),
    maxHeight: px(414)
  },
  content: {
    flexDirection: 'row',
    flexWrap: 'wrap'
  },
  item: {
    height: px(34),
    marginHorizontal: px(6),
    marginBottom: px(12),
    paddingHorizontal: px(12),
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: px(4)
  },
  unSelectedItem: {
    borderColor: APP_BORDER_GRAY,
    borderWidth: px(1)
  },
  desc: {
    fontSize: px(14),
    color: APP_BLACK,
    fontWeight: '500'
  },
  selectedItem: {
    borderColor: APP_BLUE,
    borderWidth: px(1),
    backgroundColor: APP_SECOND_LIGHT_BLUE
  },
  selectedDesc: {
    fontSize: px(14),
    color: APP_BLUE,
    fontWeight: '500'
  },
  selectedIcon: {
    position: 'absolute',
    right: -px(1),
    bottom: -px(1),
    width: px(19),
    height: px(19)
  },
  close: {
    position: 'absolute',
    right: px(14),
    top: px(16),
    width: px(14),
    height: px(14),
    alignItems: 'center',
    justifyContent: 'center'
  },
  closeIcon: {
    width: px(12),
    height: px(12)
  }
});
